<!--
 * @Author: your name
 * @Date: 2021-08-06 16:06:57
 * @LastEditTime: 2021-08-08 14:34:27
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \xxtx-group-ui\src\views\XianQu.vue
-->
<template>
  <div class="XiaoQu">
    <!-- 头部 -->
    <Header></Header>
    <!-- /头部 -->
   <!-- 体部 -->
    <div class="content">
   <!-- 轮播图 -->
        <div class="carousel" >
          <el-carousel style="width:780px;height:440px;">
            <el-carousel-item style="width:780px;height:440px;" v-for="item in carousels"  :key="item.id">
              <img style="width:780px;height:440px;" :src="item.url" alt="">
            </el-carousel-item>
          </el-carousel>
        </div>
    <!-- /轮播图 -->
    <!-- 资讯 -->
    <ul>
      <li>
        <div class="articles" >
            <!-- 文章列表 -->
            <ul>
              <li class="article" 
                @click="toArticleHandler(a.id)"
                v-for="a in articleData5" :key="a.id">
                <div class="title">{{a.title}}</div>
               
              </li>
            </ul>
            <!-- /文章列表 -->
          </div>
          </li>
      <li>
          <div class="articles" >
            <!-- 文章列表 -->
            <ul>
              <li class="article" 
                @click="toArticleHandler(a.id)"
                v-for="a in articleData1" :key="a.id">
                <div class="title">{{a.title}}</div>
               
              </li>
            </ul>
            <!-- /文章列表 -->
          </div>
      </li>
    </ul> 
    </div>
    <!-- /资讯 --> 
    <!-- 县区 -->
    <div class="XianQu">
      <div class="exchange">
      <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
      <el-tab-pane label="榆次" name="first">
      
        <ul>
              <li class="article" 
                @click="toArticleHandler(a.id)"
                v-for="a in articleData1" :key="a.id">
                <div class="title">{{a.title}}</div>
                <div>
                  <span>{{a.publishTime | fmtDate}}</span>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <span>{{a.readTimes}}</span>
                </div>
              </li>
            </ul>
        

      </el-tab-pane>
      <el-tab-pane label="太谷" name="second">
         <ul>
              <li class="article" 
                @click="toArticleHandler(a.id)"
                v-for="a in articleData2" :key="a.id">
                <div class="title">{{a.title}}</div>
                <div>
                  <span>{{a.publishTime | fmtDate}}</span>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <span>{{a.readTimes}}</span>
                </div>
              </li>
            </ul>
      </el-tab-pane>
      <el-tab-pane label="祁县" name="third">
         <ul>
              <li class="article" 
                @click="toArticleHandler(a.id)"
                v-for="a in articleData3" :key="a.id">
                <div class="title">{{a.title}}</div>
                <div>
                  <span>{{a.publishTime | fmtDate}}</span>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <span>{{a.readTimes}}</span>
                </div>
              </li>
            </ul>
      </el-tab-pane>
      <el-tab-pane label="平遥" name="fourth">
         <ul>
              <li class="article" 
                @click="toArticleHandler(a.id)"
                v-for="a in articleData4" :key="a.id">
                <div class="title">{{a.title}}</div>
                <div>
                  <span>{{a.publishTime | fmtDate}}</span>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <span>{{a.readTimes}}</span>
                </div>
              </li>
            </ul>
      </el-tab-pane>
      <el-tab-pane label="介休" name="five">
        <ul>
              <li class="article" 
                @click="toArticleHandler(a.id)"
                v-for="a in articleData4" :key="a.id">
                <div class="title">{{a.title}}</div>
                <div>
                  <span>{{a.publishTime | fmtDate}}</span>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <span>{{a.readTimes}}</span>
                </div>
              </li>
            </ul></el-tab-pane>
      <el-tab-pane label="灵石" name="six"><ul>
              <li class="article" 
                @click="toArticleHandler(a.id)"
                v-for="a in articleData3" :key="a.id">
                <div class="title">{{a.title}}</div>
                <div>
                  <span>{{a.publishTime | fmtDate}}</span>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <span>{{a.readTimes}}</span>
                </div>
              </li>
            </ul></el-tab-pane>
      <el-tab-pane label="寿阳" name="seven"><ul>
              <li class="article" 
                @click="toArticleHandler(a.id)"
                v-for="a in articleData5" :key="a.id">
                <div class="title">{{a.title}}</div>
                <div>
                  <span>{{a.publishTime | fmtDate}}</span>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <span>{{a.readTimes}}</span>
                </div>
              </li>
            </ul></el-tab-pane>
      <el-tab-pane label="昔阳" name="eight"><ul>
              <li class="article" 
                @click="toArticleHandler(a.id)"
                v-for="a in articleData1" :key="a.id">
                <div class="title">{{a.title}}</div>
                <div>
                  <span>{{a.publishTime | fmtDate}}</span>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <span>{{a.readTimes}}</span>
                </div>
              </li>
            </ul></el-tab-pane>
      <el-tab-pane label="和顺" name="nine"><ul>
              <li class="article" 
                @click="toArticleHandler(a.id)"
                v-for="a in articleData2" :key="a.id">
                <div class="title">{{a.title}}</div>
                <div>
                  <span>{{a.publishTime | fmtDate}}</span>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <span>{{a.readTimes}}</span>
                </div>
              </li>
            </ul></el-tab-pane>
      <el-tab-pane label="左权" name="ten"><ul>
              <li class="article" 
                @click="toArticleHandler(a.id)"
                v-for="a in articleData3" :key="a.id">
                <div class="title">{{a.title}}</div>
                <div>
                  <span>{{a.publishTime | fmtDate}}</span>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <span>{{a.readTimes}}</span>
                </div>
              </li>
            </ul></el-tab-pane>
      <el-tab-pane label="榆社" name="eleven"><ul>
              <li class="article" 
                @click="toArticleHandler(a.id)"
                v-for="a in articleData4" :key="a.id">
                <div class="title">{{a.title}}</div>
                <div>
                  <span>{{a.publishTime | fmtDate}}</span>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <span>{{a.readTimes}}</span>
                </div>
              </li>
            </ul></el-tab-pane>
  </el-tabs>
    <!-- 县新闻 -->
  
    </div>
   
    </div>
    <!-- /县新闻 -->
    <!-- /县区 -->
   
    <!-- /体部 -->
    <!-- 底部 -->
    <Footer></Footer>
    <!-- /底部 -->
  </div>
</template>
<script>
import Header from './components/Header'
import Footer from './components/Footer'
import {get} from '../utils/request'
export default {
  components:{
    Header,Footer
  },
  data() {
    return{
        loading:false,
      category:{},
      carousels:[],
       activeName: 'second',
    param1:{
        page:1,
        pageSize:5
      },
      param2:{
        page:2,
        pageSize:5
      },
      param3:{
        page:3,
        pageSize:5
      },
      param4:{
        page:4,
        pageSize:5
      },
      param5:{
        page:5,
        pageSize:5
      },
      articleData1:[],
      articleData2:[],
      articleData3:[],
      articleData4:[],
      articleData5:[]
      }
  },
  //  watch:{
  //   '$route.query':{
  //     handler(query){
  //       this.category = query;
  //       this.loadArticles();
  //     },
  //     deep:true
  //   }
  // },
  // 2. 生命周期钩子函数 - 在vue的生命周期各个阶段会执行的代码
   created(){
     this.loadCarousels();
     this.loadArticles1();
     this.loadArticles2();
     this.loadArticles3();
     this.loadArticles4();
     this.loadArticles5();
   },
  // 3. 方法，一般用来定义方法或者事件处理函数
    methods:{
        toArticleHandler(id){
      this.$router.push({path:'/xianqulist',query:{id}})
    },
    handleClick(tab, event) {
        console.log(tab, event);
      },
    loadCarousels(){
      let url = '/index/carousel/findAll'
      get(url).then(resp => {
        let arr = resp.data;
        this.carousels=arr.slice(8,13);
      })
      },
      loadArticles1(){
      let url = "/index/article/pageQuery"
      get(url,this.param1).then(resp => {
        this.articleData1 = resp.data.list;
      })
    },
      loadArticles2(){
        let url = "/index/article/pageQuery"
      get(url,this.param2).then(resp => {
        this.articleData2 = resp.data.list;
      })
    },
        loadArticles3(){
        let url = "/index/article/pageQuery"
      get(url,this.param3).then(resp => {
        this.articleData3 = resp.data.list;
      })
    },
    loadArticles4(){
        let url = "/index/article/pageQuery"
      get(url,this.param4).then(resp => {
        this.articleData4 = resp.data.list;
      })
    },
    loadArticles5(){
        let url = "/index/article/pageQuery"
      get(url,this.param5).then(resp => {
        this.articleData5 = resp.data.list;
      })
    }
    }
}
</script>

 <style lang="scss" scoped>
 // 变量
$color_primary:#028b39;
.XiaoQu{
  //内容样式
  .content{
    display: flex;
    align-self: center;
    margin: 1em 7%;
    
    .carousel{
      
        width: 780px;
        height: 440px;
    }
    .articles::after{     
     content:"";
      display: block;
      clear: both;
    }
    .articles{
      
       margin-left: 5% ;
        ul{
          margin-left: 5%;
          width: 400px;
        }
        ul >li:first-child{
          color: black;
          font-size: 1.5em;
          list-style: none;
        }
        ul  li {
          padding: .5em 0;
          list-style: square;
          border-bottom: 1px solid #ededed;
          & > div {
            line-height: 1.8em;
          }
          .title {
            cursor: pointer;
          }
        }
    }

   
  }
  .XianQu{
    background-color: #F9F9F9;
    height: 50px;
    line-height: 50px;
    min-height: 500px;
    margin-left: 7% ;
  
     width: 1300px;
   ul > li.article {
          padding: .5em 0;
          border-bottom: 1px solid #ededed;
          & > div {
            line-height: 1.8em;
          }
          .title {
            cursor: pointer;
          }
        }
  
  } 
}
</style>
